<template>
  <section id="orderrecord" v-loading.fullscreen.lock="showloading">
      <div style='height:240px;margin:100px auto;line-height:240px;' v-if='extensionOff'>
         <!-- <img src="../../../static/img/no-data.png" height="100%" width="100%" alt=""> -->
         暂无订单数据
      </div>
      <div 
        class="orderlist" 
        v-for='(val,index) in orderList'
        :key='index'
        @click='comonOrderInfo(val.num)'
        >
          <el-row>
             <el-col :span='8'>
               <img :src="val.infoImgJson" width="90" height="70">
             </el-col>
             <el-col :span='12' style='' class='order-info-font'>
               <h3>{{val.fullName}}</h3>
               <div>类型：{{typeVal(val.type)}}</div>
             </el-col>
             <el-col :span='4'>
               <span class='order-status'>{{orderStatus(val.orderStatus)}}</span>
             </el-col>
          </el-row>
          <p style='border-bottom:1px solid rgb(239,239,239);margin-top:15px;'></p>
          <el-row style='padding:8px 0;'>
            <el-col :span='12' style='line-height:28px;'>
              <strong>实价：{{val.realAmount}}</strong>
            </el-col>
            <el-col :span='6'>
              <el-button 
                 v-if='offPay(val.orderStatus)'
                 style='float:right' 
                 @click.stop="goPay(val.num)"  
                 type="danger" 
                 size="mini" 
                 plain>
                 去支付
               </el-button>
            </el-col>
            <el-col :span="showWidth(val.orderStatus)" v-if='showClose(val.orderStatus)'>
              <el-button 
                 style='float:right' 
                 @click.stop="afterOrdEv(val.orderStatus,val.num)"  
                 type="danger" 
                 size="mini" 
                 plain>
                 {{afterOrdVal(val.orderStatus)}}
               </el-button>
            </el-col>
          </el-row>
      </div> 
  </section>
</template>

 <script>
import { URL_USER_ORDER,AJAX,URL_USER_ORDREINFO,URL_PAY,URL_CLOSEORDER,_layer,URL_ORDERSURE} from "@/comm.js";
export default {
  data(){
    return ({
      extensionOff:true,
      showloading:false,
      orderList:[],
      orderGetSta:{
        //1 3 5 可以取消订单  7 去评论  9 已取消 
        '1':'待支付',
        '3':'待确认',
        '5':'待服务',
        '7':'已完成',
        '9':'已取消'
      },
      typeGetVal:{
        '1':'服务',
        '2':'商品'
      },
      afterOrSta:{
        '1':'去取消',
        '3':'去取消',
        '5':'完成服务',
        '7':'去评论'
      }
    });
  },
  created(){
    $('title').text('订单列表');
    this.getOrderList();
    //IOS的微信地图接口授权
    this.map();
  },
  methods:{
    //拉订单列表数据
    getOrderList(){
      let This=this;
      this.showloading=true;
      AJAX({
        method:'post',
        url:URL_USER_ORDER,
      },function(data){
        console.log('dingdan');
        console.log(data)
        This.showloading=false;
        if(!data.data.retult||!data.data.data.length){
          This.extensionOff=true;
          return ;
        }
        This.extensionOff=false;
        console.log('用户订单');
        console.log(data);
        let realData=data.data.data;
        realData.sort(function(one,two){
          if(one.createTime>two.createTime){
            return 0
          }else{
            return 1
          }
        });
        This.orderList=realData;
      });
    },
    //根据订单状态来得到中文
    orderStatus(status){
      return this.orderGetSta[status];
    },
    //根据类型状态来得到 是服务/商品
    typeVal(status){
      return this.typeGetVal[status];
    },
    //根据订单状态来返回 去取消/去评论/已取消
    afterOrdVal(status){
      return this.afterOrSta[status];
    },
    //是否显示去支付按钮
    offPay(status){
      if(status=='1'){
        return true;
      }
    },
    //是否显示去取消按钮
    showClose(val){
      return val=='9'?false:true;
    },
    pay(json){
      let This=this;
      WeixinJSBridge.invoke('getBrandWCPayRequest', json.pay, function(res){  
         if(res.err_msg == "get_brand_wcpay_request:ok" ) {
            console.log('支付成功');
            _layer("已完成支付，去商家那接受服务吧");
            setTimeout(function(){
                This.getOrderList();
            },1000);
         }else{
            _layer('噢,支付失败');
         }   
      });       
    },
    //去支付
    goPay(num){
      let This=this;
      let send={
        orderNum:num,
      };
      console.log('订单编号')
      console.log(send)
      $.post(URL_PAY,send,function(data){
        console.log('支付返回');
        console.log(data);
        if(data.retult){
          if (typeof WeixinJSBridge == "undefined"){
             _layer('请用微信支付');
          }else{
             This.pay(data.data);
          }
        }else{
          _layer('噢，支付失败');
        }
      })
    },
    //根据这个来决定去取消按钮的宽度
    showWidth(status){
      return status=='1'?6:12;
    },
    //点击 去取消/去评论/已取消
    afterOrdEv(status,orderNum){
      console.log(status+'    '+orderNum)
      switch(status){
        case 1:
        case 3:
          //去取消订单
          this.cancelOr(orderNum);
          break ;
        case 5:
          //用户确认完成服务
          this.suerService(orderNum);
          break ;
        case 7:
          //去评论
          this.commentOr(orderNum);
          break ;
        case 9:
          break ;
      }
    },
    //取消订单
    cancelOr(orderNum){
      let This=this;
      console.log('取消订单事件，，，，'+orderNum);
      This.showloading=true;
      $.post(URL_CLOSEORDER,{
        num:orderNum
      },function(data){
        console.log('取sdf消订单')
        console.log(data);
        if(data.retult){
          _layer(data.message);
          setTimeout(function(){
            This.getOrderList();
          },1000);
        }else{
          This.showloading=false;
          _layer(data.message);
        } 
      });
    },
    //评论订单
    commentOr(orderNum){
      _layer('暂无功能哦，暗自期待吧');
      console.log('评论订单事件，，，，'+orderNum);
    },
    //用户确认完成服务
    suerService(orderNum){
        let This=this; 
        let send={
           orderNum:orderNum
         };
         console.log('将进入到已完成状态');
         $.post(URL_ORDERSURE,send,function(data){
           console.log(data);
           if(data.retult){
             _layer('恭喜你，订单已完成');
             setTimeout(function(){
               This.getOrderList();
             },2000);
           }else{
             _layer('确认完成服务失败  '+data.message);            }
         });
    },
    //进入订单详情 
    comonOrderInfo(orderNum){
      this.$router.push({path:'/my-order.html/orderInfo',query:{orderNum:orderNum}});
    },
    //地图功能，用于IOS只调用一次
    map(){
        $.ajax({
            type : "get",  //提交方式  
            url : "/wx/jsapi",//路径  
            data:{url:window.location.href},
            success : function(result) {//返回数据根据结果进行相应的处理  
                if ( result.retult ) {  
                       wx.config({
                          appId:result.data.appId,
                          nonceStr:result.data.nonceStr,
                          signature:result.data.signature,
                          timestamp:result.data.timestamp,
                          jsApiList: [
                              'openLocation',
                              'getLocation'
                          ]
                        });
                } else {
                  _layer('地图初始化失败');  
                }  
            }  
        });  
    }
  }
}
</script>
<style>
#orderrecord .navitem {
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  margin: auto;
  width: 70px;
  text-align: center;
}
#orderrecord .navaction {
  border-bottom: 2px solid #f1cf83;
  font-weight: bold;
}
#orderrecord > .orderlist {
  padding: 15px 15px 10px 15px;
  margin-bottom:5px;
  background-color: white;
}
#orderrecord > .orderlist .orderstatus {
  display: inline-block;
  float: right;
}
.order-status{
    display: inline-block;
    width: 50px;
    height: 20px;
    float: right;
    line-height: 20px;
    text-align: center;
    background: #ecf5ff;
    color: #429dff;
}
.order-info-font{
    line-height:20px;
    font-size: 15px;
}
.order-info-font h3{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-info-font div{
    line-height:25px;
    color: #999;
    font-size: 12px;
}
</style>
